<template>
    <div>
        <h2>活动文章设置</h2>
        <div class="container">

            <div style="margin-bottom: 20px;">
                <el-button type="default" @click="add">添加活动</el-button>
            </div>

            <el-tabs v-model="currentTab">
                <el-tab-pane label="列表" name="list">
                    <el-table :data="items" style="width: 100%">
                        <el-table-column label="ID" width="80" prop="id">
                        </el-table-column>
                        <el-table-column label="活动标题"  prop="title">
                        </el-table-column>
                        <el-table-column label="活动主图" >
                            <template slot-scope="scope">
                                <img v-if="scope.row" :src="scope.row.image.file_url" height="130">
                            </template>
                        </el-table-column>
                        <el-table-column label="状态">
                            <template slot-scope="scope">
                                <div slot="reference" class="name-wrapper">
                                    <el-tag size="medium">{{ scope.row.status_name }}</el-tag>
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column label="到期时间" width="160" prop="end_at">
                        </el-table-column>
                        <el-table-column label="创建时间" width="160" prop="created_at">
                        </el-table-column>
                        <el-table-column label="操作">
                            <template slot-scope="scope">
                                <el-button size="mini" @click="edit(scope.row)">编辑</el-button>
                                <el-button size="mini" type="danger" @click="destroy(scope.row.id)">删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-tab-pane>

                <el-tab-pane label="添加活动" name="add" v-if="currentTab == 'add'">
                    <el-form ref="form" :model="form" label-width="80px">
                        <el-form-item label="活动标题">
                            <el-input v-model="form.title"></el-input>
                        </el-form-item>
                        <el-form-item label="活动主图">
                            <image-upload ref="imageUpload" :file-list="form.image_files" @change="uploadBannerHandle" :files.sync="form.image_files" :mutiple="true" :max="parseInt(1)"></image-upload>
                        </el-form-item>
                        <el-form-item label="结束时间">
                            <el-col :span="11">
                                <el-date-picker type="date" placeholder="选择日期" v-model="form.end_at" style="width: 40%;"></el-date-picker>
                            </el-col>
                        </el-form-item>
                        <el-form-item label="创建日期">
                            <el-col :span="11">
                                <el-date-picker type="date" placeholder="选择日期" v-model="form.created_at" style="width: 40%;"></el-date-picker>
                            </el-col>
                        </el-form-item>
                        <el-form-item label="详细内容">
                            <editor  style="width: 880px;" ref="editor2" v-model="form.detail"></editor>
                        </el-form-item>
                        <el-form-item >
                            <el-button @click="close">取 消</el-button>
                            <el-button type="primary" @click="save">确 定</el-button>
                        </el-form-item>
                    </el-form>
                </el-tab-pane>
            </el-tabs>
        </div>
    </div>
</template>
<script>
  import editor from './PageEditor.vue';

    export default {
        components: {
            editor
        },
        props: {
            value: String
        },
      data() {
        return {
            currentTab: 'list',
            items: [],
            loading: true,
            params: {
                //
            },
            form: {},
            dialogVisible: false,
          }
      },
      created() {
        this.fetch();
      },
      methods: {
        fetch() {
          axios.get('/admin/api/activity', {params: this.params}).then((res) => {
            if (res.data.code === 0) {
              this.items = res.data.data.items;
              // console.log(this.items);
              if (this.items.length > 0) {

              }
            } else {
              this.$message(res.data.msg);
            }
            this.loading = false;
          }).catch((err) => {
            console.log(err);
            this.$message('系统错误');
            this.loading = false;
          })
        },

        add() {
           this.form = {};
           this.dialogVisible = true;
           this.currentTab = 'add';
        },
        edit(item) {
            this.dialogVisible = true;
            this.currentTab = 'add';
            this.form = Object.assign({}, item);
            this.form.image_files = [
                {
                    id: this.form.image_id,
                    url: this.form.image.file_url
                }
            ];
            console.log(this.form);
            console.log(this.form.image_files);
        },

        save() {
          if (this.form.id !== undefined) {
            this.update();
          } else {
            this.form.detail = this.$refs.editor2.html;
            this.store();
          }
        },

        store() {
            axios.post('/admin/api/activity', this.form).then((res) => {
            if (res.data.code === 0) {
              this.dialogVisible = false;
              this.fetch();
              this.currentTab = 'list';
            } else {
              this.$message(res.data.msg);
            }
            this.loading = false;
          }).catch((err) => {
            this.$message('系统错误');
            this.loading = false;
          })
        },

        update() {
          axios.put('/admin/api/activity/' + this.form.id, this.form).then((res) => {
            if (res.data.code === 0) {
              this.dialogVisible = false;
              this.fetch();
            this.currentTab = 'list';
            } else {
              this.$message(res.data.msg);
            }
            this.loading = false;
          }).catch((err) => {
            this.$message('系统错误');
            this.loading = false;
          })
        },
        close() {
            this.dialogVisible = false;
            this.form = {};
            this.edit_form = {};
            this.currentTab = 'list';
         },



        destroy(id) {
          axios.delete('/admin/api/activity/' + id).then((res) => {
            if (res.data.code === 0) {
              this.fetch();
            } else {
              this.$message(res.data.msg);
            }
            this.loading = false;
          }).catch((err) => {
            this.$message('系统错误');
            this.loading = false;
          });
        },
        uploadBannerHandle(files) {
            if (typeof files[0] !== 'undefined') {
                let i;
                for (i = 0; i < files.length; i++) {
                    this.form.image_id = files[i].id;
                    // this.form.image_files.file_url = files[i].file_url;
                }
            } else {
                this.form.image_id = null;
            }
        },
      }
    }
</script>